import React from 'react';
import {Button, Tooltip, Icon, Table} from 'antd';
import moment from 'moment';

export default class EligibilityTable extends React.Component {
  static defaultProps = {
    dataSource: [],
    showDetail: () => {
    },
  };

  sortJs = (oldA, oldB) => {
    let a = oldA || '';
    let b = oldB || '';
    a = a.trim().toLowerCase() || '';
    b = b.trim().toLowerCase() || '';
    if (a === b) return 0;
    if (a > b) return 1;
    if (a < b) return -1;
  };

  render() {
    const {dataSource, showDetail} = this.props;
    const {Column} = Table;
    const paginationOpts =
      {
        defaultPageSize: 5,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20', '30', '40'],
        showTotal: () => `Total ${dataSource.length} items`,
      };

    return (
      <Table
        dataSource={dataSource}
        pagination={paginationOpts}
        size="middle"
        bordered
      >
        <Column
          title="Campaign Name"
          dataIndex="Description"
          key="Description"
          sorter={(a, b) => this.sortJs(a.Description, b.Description)}
          render={Description => (
            <Tooltip placement="bottom" title={Description || '-'}>
              <span>{Description || '-'}</span>
            </Tooltip>
          )}
        />
        <Column
          title="Redemption Start Date"
          dataIndex="startDate"
          key="startDate"
          sorter={(a, b) => a.startDate - b.startDate}
          render={item => (
            <Tooltip placement="bottom" title={item ? moment(item, 'YYYY-MM-DD HH:mm:ss').format('DD-MMM-YYYY') : '-'}>
              {item ? moment(item, 'YYYY-MM-DD HH:mm:ss').format('DD-MMM-YYYY') : '-'}
            </Tooltip>
          )}
        />
        <Column
          title="Redemption End Date"
          dataIndex="endDate"
          key="endDate"
          defaultSortOrder='ascend'
          sorter={(a, b) => a.endDate - b.endDate}
          render={item => (
            <Tooltip placement="bottom" title={item ? moment(item, 'YYYY-MM-DD HH:mm:ss').format('DD-MMM-YYYY') : '-'}>
              {item ? moment(item, 'YYYY-MM-DD HH:mm:ss').format('DD-MMM-YYYY') : '-'}
            </Tooltip>
          )}
        />
        <Column
          title="CALL RSVP"
          dataIndex="CALL"
          key="CALL"
          sorter={(a, b) => this.sortJs(a.CALL.callRsvp, b.CALL.callRsvp)}
          render={CALL => {
            const color = CALL.status;
            return (
              <React.Fragment>
                {CALL.callRsvp && (
                  <span
                    style={{
                      marginTop: '-3px',
                      top: '-1px',
                      backgroundColor: color,
                      display: 'inline-block',
                      width: '6px',
                      height: '6px',
                      verticalAlign: 'middle',
                      borderRadius: '50%',
                    }}
                  />
                )}
                <Tooltip placement="bottom" title={CALL.callRsvp || '-'}>
                  <span style={{marginLeft: '6px'}}>{CALL.callRsvp || '-'}</span>
                </Tooltip>
              </React.Fragment>
            );
          }}
        />
        <Column
          title="SMS"
          dataIndex="SMS"
          key="SMS"
          sorter={(a, b) => this.sortJs(a.SMS, b.SMS)}
          render={SMS => (
            <Tooltip placement="bottom" title={SMS}>
              <Button style={{width: '70px'}}>
                {SMS.length <= 5 ? SMS || '-' : `${SMS.substring(0, 6)}...`}
              </Button>
            </Tooltip>
          )}
        />
        <Column
          width={50}
          align="center"
          title=" "
          dataIndex="Detail"
          key="Detail"
          fixed="right"
          render={Detail => (
            <div onClick={() => showDetail(Detail)}>
              <Tooltip placement="bottom" title="Detail">
                <Icon type="eye" theme="filled"/>
              </Tooltip>
            </div>
          )}
        />
      </Table>
    );
  }
}
